.bigbox{
    width: 100%;
}

/* 图片自适应 */
.auto-img{
    width: 100%;
    height: auto;
    display: block;
}
/* 版心宽度1260px */
/* 网页头部 */
header{
    width: 100%;
    background-color: #76C7C0;
    /* border: 20px solid #000;
    border-image-source: url(../1.07.31/images/bg-ruler-up.png);
    border-image-slice:27 27 27 27 ; */
}
header .container{
    width: 1260px;
   
    margin:0 auto;
    box-sizing: border-box;
    padding: 20px 0;
    /* background-color: blue; */
    display: flex;
    align-items: center;
    justify-content: space-between;

    
}
header .container .logo{
    width: 212px;
    
   
    color: white;
    font-size: 20px;
}
header .container .navl{
    width: 845px;

}
header .container .navl>ul{
    display: flex;
    align-items: center;
}
header .container .navl>ul>li{
    padding: 10px 15px;
    box-sizing: border-box;
    
    color: white;
    margin: 0 5px;
    border-radius: 5px;
}
header .container .navl>ul>li:hover{
    background-color: #E8645A;
    box-shadow: 0px 0px 5px #62A29E;
    border-bottom: 10px #000;
    
}
header .container .navl>ul>.active{
    background-color: #62A29E;
    box-shadow: 0px 0px 5px #62A29E;
}
/* 网页头部 */

/* 轮播图 */
.banner{
    width: 100%;
    position: relative;
}
.banner .prev{
    
    display: block;
    position: absolute;
    top: 195px;
    left: 0;
    width: 21px;
	height: 23px; 
    /* box-sizing: border-box;
    padding: 20px; */
    margin: 10px;
    background-color: red;


    background: url(../1.07.31/images/sprites.png) no-repeat 0 -35px;
   
    
}

.banner .next{
    background: url(../1.07.31/images/sprites.png) no-repeat -1px -63px;
    display: block;
    position: absolute;
    top: 195px;
    right:  0;
    width: 23px;
	height: 23px;
    margin: 10px;
}

/* 轮播图 */

/* 主要内容 */
main{
    width: 100%;
}
.banner-bottom{
    width: 100%;
}
.banner-bottom .container{
    width: 220px;
    margin: 25px auto;
    display: flex;
    justify-content: space-between;
}
.banner-bottom .container .pagination{
    width: 65px;
    height: 5px;
    background-color: #B0B8B9;
}
.banner-bottom .container .active{
    background-color: red;
}

.some{
    width: 100%;
}
.some .container{
    width: 1260px;
    
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: #ECECEC;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.some .container .some-text{
    width: 905px;
   
    /* background-color: salmon; */
    
}
.some .container .some-text>li{
    margin-top: 5px;
}
.some .container .some-text>li:first-child{
    font-size: 20px;
    color: #7F8C8C;
}
.some .container .some-text>li:last-child{
    font-size: 10px;
    color: #7F8C8C;
}
.some .container .some-btn{
    width: 220px;
    height: 60px;
    background-color: #E8645A;
    text-align: center;
    color: white;
    line-height: 60px;
    border-radius: 5px;
    border: 1px 1px 5px 1px red;
}

/* .some  */
.list{
    width: 100%;
}
.list .container{
    width: 1260px;
    
    margin: 0 auto;
    box-sizing: border-box;
    padding: 60px 0;
    
}
.list .container .list-ul{
    display: flex;
    justify-content: space-between;
}
.list .container .list-ul>li{
    box-shadow: 0 0 5px #999;
    width: 300px;
    height: 340px;
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}
.list .container .list-ul>li .list-ul-img{
    display: flex;
    flex-direction: column;
}
.list .container .list-ul>li .list-ul-text{
    text-align: center;
    font-size: 10px;
    margin-top: 10px;
}
.list .container .list-ul>li .list-ul-foot{
    width: 205px;
    height: 60px;
    background-color: #76C7C0;
    position: absolute;
    bottom: -28px;
    left: 50;
    color: white;
    text-align: center;
    line-height: 60px;
    border-radius: 5px;
}
.list .container .list-ul>li:first-child{
    background-color: #FFFFFF;
}
/* .some  */
.why{
    width: 100%;
    background-color: #ECECEC;
}
.why .container{
    width: 1260px;
    height: 430px ;
    margin: 0 auto;
    /* background-color: blue; */
    
}
.why .container .why-bigtext{
    width: 100%;
    color: red;
    text-align: center;
    padding-top: 75px;
    font-size: 40px;
}
.why .container .why-smelltext{
    font-size: 10px ;
    text-align: center;
    color: #A3A3A3;
}
.why .container .why-bot-img{
    width: 100%;
    height: 400px;
    /* background-color: rosybrown; */
    position: relative;
    top: 50px;
}
.why .container .why-bot-img .why-bot-img-ul{
    display: flex;
    
}
.why .container .why-bot-img .why-bot-img-ul>li:first-child{
    position: relative;
    top: 100px;
    left: 50px;
    z-index: 0;
}

.why .container .why-bot-img .why-bot-img-ul>li:nth-child(2){
    position: relative;
    top: 50px;
    
    z-index: 1;
}
.why .container .why-bot-img .why-bot-img-ul>li:last-child{
    z-index: 0;
    position: relative;
    top: 100px;
    right: 90px;
}



.uswhy{
    width: 100%;
}
.uswhy .container{
    width: 1260px;
    margin: 0 auto;
    /* height: 250px; */
    /* background-color: saddlebrown; */
    margin-top: 220px;
    margin-bottom: 70px;
    margin-bottom: 50px;
    box-sizing: border-box;
    padding-bottom: 50px;
    display: flex;
    justify-content: space-between;
}
.uswhy .container .conter-left{
    width: 250px;
    height: 100%;
   
}
.uswhy .container .conter-left>h1{
    color: #808D8D;
    font-size: 20px;
}
.uswhy .container .conter-left>li{
    padding-left: 20px;
    font-size: 12px;
    margin-top: 15px;
    
    position: relative;
}


.uswhy .container .conter{
    width: 600px;
    height: 100%;
    /* background-color: skyblue; */
}
.uswhy .container .conter>p{
    line-height: 20px;
    font-size: 10px;
    padding: 0 20px;
}
.uswhy .container .conter .conter-ul{
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}
.uswhy .container .conter .conter-ul>li{
    width: 135px;
}
.uswhy .container .conter .conter-ul>li>p{
    text-align: center;
}
.uswhy .container .conter-right{
    width: 280px;
    height: 100%;
    /* background-color: springgreen; */
}
.uswhy .container .conter-right>h1{
    color: #808D8D;
    font-size: 20px;
    
}
.uswhy .container .conter-right>div{
    
    box-sizing: border-box;
    margin-top: 20px;
    width: 295px;
   
    background-color: white;
    padding: 10px 20px;
    font-size: 15px;
}
.uswhy .container .conter-right>h2{
    padding-top: 20px;
    text-align: center;
}



.our{
    width: 100%;
}
.our .container{
    width: 1260px;
    
    margin: 0 auto;
    /* background-color: yellowgreen; */
}

.our .container .our-top{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    /* background-color:firebrick ; */
}
.our .container .our-top>h1{
    
    font-size: 20px;
    color: #8B9797;
}
.our .container .our-top .our-top-he{
    padding-left: 10px;
    box-sizing: border-box;
    width: 955px;
}
.our .container .our-top .our-top-btn{
    display: flex;
    justify-content: space-between;
}
.our .container .our-top .our-top-btn>li:first-child{
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    margin-left: 10px;
    background-color: #98A3A3;
    /* text-align: center;
    line-height: 45px; */
}
.our .container .our-top .our-top-btn>li:last-child{
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    margin-left: 10px;
    background-color: #E2534B;
    /* text-align: center;
    line-height: 45px; */
}

.our .container .our-bottom{
    width: 100%;
   
}
.our .container .our-bottom .our-bottom-ul{
    width: 100%;
    margin-top: 50px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
.our .container .our-bottom .our-bottom-ul>li{
    padding: 20px;
    box-sizing: border-box;
    width: 185px;
    background-color: white;
    box-shadow: 0 0 5px #999;
}
/* 主要内容 */


/* 前小箭头 */
.qinajian::before{
    content: "";
    /* background-color: black; */
    background-image: url(../1.07.31/images/hongjiantou.png);
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0  ;
    left: 0;
    /* z-index: 1; */
    
}
.aaa{
    position: relative;
}
.aaa:hover>ul{
    display: block;
    z-index: 1;
}
.whha{
    position: absolute;
    top: 35px;
    left: 0;
    display: none;
    border-radius: 5px;
    background-color: #E2534B;
}
.whha>li{
    width: 250px;
    margin: 5px;
    background-color: #E2534B;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px #999;
}
.whha>li:hover{
    background-color: #76C7C0;
    border-radius: 5px;
}


.bannertext::after{
    content: "VESTIBULM";
    position: absolute;
    color: white;
    top: 200px;
    left: 600px;
    font-size: 40px;
    font-weight: bolder;
    letter-spacing: 5px;
}
.bannertext::before{
    content: " Maecenas tincidunt, augue et rutrum condimentum,libero lectus mattis orci, ut commodo.";
    position: absolute;
    color: white;
    width: 444px;
    text-align: center;
    top: 250px;
    left:505px ;
    font-size: 15px;
}